<template>
  <div>
    <!-- <span v-show="flag">{{LocationCity}}</span> -->
    <span>{{this.currentCity}}</span>
    <!-- <span v-show="flag1">{{this.currentCity1}}</span> -->
  </div>
</template>

<script>
import axios from "axios";
import map from "../../map.js";
// 引入百度地图对象 Bmap
// import Bmap from "Bmap";
import { mapState, mapMutations } from "vuex";

import { MessageBox } from "mint-ui";

export default {
  data() {
    return {
      LocationCity: "正在定位", //给渲染层定义一个初始值
      currentCity1: ""
      // flag: true,
      // flag1: false
    };
  },
  computed: {
    ...mapState({
      currentCity: "city"
    })
  },
  created() {},
  mounted() {
    this.city(); //触发获取城市方法
    //this.getCurrentCity();
    this.changeCity();
    this.compareCity();
  },
  methods: {
    city() {
      map.init().then(BMap => {
        const geolocation = new BMap.Geolocation();
        var _this = this;
        geolocation.getCurrentPosition(
          function getinfo(options) {
            let city = options.address.city; //获取城市信息
            // let province = position.address.province; //获取省份信息
            _this.LocationCity = city.substring(0, city.length - 1);
          },
          function(e) {
            _this.LocationCity = "定位失败";
          },
          { provider: "baidu" }
        );
      });
    },
    changeCity() {
      var _this = this;
      setTimeout(() => {
        //console.log(_this.LocationCity);
        //this.$store.commit("changeCity", _this.LocationCity);
        this.$store.commit("changeCity1", _this.LocationCity);
      }, 500);
    },
    // getCurrentCity() {
    //   var _this = this;
    //   setTimeout(() => {
    //     _this.currentCity = this.$store.state.city;
    //   }, 1000);
    // }
    compareCity() {
      // setTimeout(() => {
      //   console.log(this.currentCity);
      //   console.log(this.LocationCity);
      //   if (this.currentCity !== this.LocationCity) {
      //     MessageBox.confirm("", {
      //       title: "提示",
      //       message: "定位城市与默认城市不一致，是否需要切换",
      //       confirmButtonText: "切换",
      //       cancelButtonText: "取消"
      //     })
      //       .then(action => {
      //         //console.log(123)
      //         if (action == "confirm") {
      //           console.log(this.currentCity);
      //           console.log(this.LocationCity);
      //           // console.log(localStorage.state.city)
      //           // console.log(localStorage.state.city1)
      //           this.currentCity1 = this.LocationCity;
      //           this.flag = false;
      //           this.flag1 = true;
      //           console.log(this.currentCity1);
      this.$store.commit("compareCity");
      //           //localStorage.city = state.city1;
      //           //state.city = ''
      //         }
      //       })
      //       .catch(error => {
      //         if (error == "cancel") {
      //           //console.log('点击取消')
      //         }
      //       });
      //   }
      // }, 300);
    }
  }
  // watch: {
  //   currentCity() {
  //     if (this.currentCity) {
  //       //console.log(this.currentCity);
  //       this.flag = true;
  //       this.flag1 = false;
  //     }
  //   }
  // }
};
</script>

<style lang="scss">
.mint-msgbox {
  width: 63%;
  font-size: 14px;
  border-radius: 5px;
  .mint-msgbox-title {
    color: black;
    font-weight: bold;
    font-size: 18px;
  }
  .mint-msgbox-message {
    color: black;
    line-height: 24px;
  }
  .mui-btn,
  button,
  input[type="button"],
  input[type="reset"],
  input[type="submit"] {
    font-size: 16px;
    color: #26a2ff;
  }
}
</style>